<template>
	<u-popup :show="visible" @close="close">
		<view class="popup">
			<view class="popup-header">
				<image :src="ossUrl + `/static/叉号.png`" @click="close"></image>
			</view>
			<!-- 全选 -->
			<view class="list">
				<view class="list-item" v-for="it in list">
					<view class="list_item" @click="setSelectKey(it.id)">
						<image class="list_item-img" :src="it.img" mode="aspectFill"></image>
						<view class="list_item-content">
							<view class="list_item-content-h">
								{{ it.title }}
							</view>
							<view class="list_item-content-subTitle">
								分类：{{ it.classification }}
							</view>
							<view class="list_item-content-address">￥{{it.price}}</view>
						</view>
						<view class="list_item-rig">
							<image :src="ossUrl + `/static/${selectKey.includes(it.id)? '4' : '1'}.png`" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="form" v-if="type == 4">
				<view class="form-header">
					<view class="form-header-title">批量修改简介：</view>
					<view class="form-header-btn" @click="submit">确定</view>
				</view>
				<view class="form-c">
					<textarea placeholder="在这填写修改的简介" placeholder-class="ac" v-model="content"></textarea>
				</view>
			</view>
			<view class="form price" v-if="type == 3">
				<view class="form-header">
					<view class="form-header-title">
						批量修改价格：
						<input type="number" v-model="price" />
						元
					</view>
					<view class="form-header-btn" @click="submit">确定</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		InformationGetPrice
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				visible: false,
				list: [],
				type: '',
				form: '',
				selectKey: [],
				price: '',
				content: '',
				min: '',
				max: ''
			}
		},
		created() {
			InformationGetPrice().then(res => {
				if (res.data) {
					this.min = res.data.min
					this.max = res.data.max
				}
			})
		},
		methods: {
			setSelectKey(id) {
				if (!this.selectKey.includes(id)) {
					this.selectKey.push(id)
				} else {
					this.selectKey = this.selectKey.filter(i => i != id)
				}
			},
			show(type, it, list, selectKey) {
				this.type = type
				this.list = list
				this.form = it
				this.selectKey = selectKey
				this.visible = true
			},
			close() {
				this.visible = false
			},
			submit() {
				if (this.selectKey.length === 0) {
					uni.showToast({
						duration: 3000,
						title: '请选择视频！',
						icon: 'none'
					})
					return
				}
				let data = {}
				if (this.type == 3) {
					if (!(this.price >= this.min && this.price <= this.max)) {
						uni.showToast({
							duration: 3000,
							title: `请输入${this.min}-${this.max}之间的价格`,
							icon: 'none'
						})
						return
					}
					data = {
						type: this.type,
						price: this.price,
						id: this.selectKey.join(',')
					}
				}
				if (this.type == 4) {
					data = {
						type: this.type,
						content: this.content,
						id: this.selectKey.join(',')
					}
				}
				this.$emit('submit', this.type, data)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100%;
		position: relative;
		background: #F6F7F8;

		.popup-header {
			padding: 27rpx 0;
			position: relative;

			image {
				position: absolute;
				top: 30rpx;
				right: 38rpx;
				width: 30rpx;
				height: 30rpx;
			}

			font-family: PingFang;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			text-align: center;
		}

		.list {
			width: 690rpx;
			padding-top: 30rpx;
			max-height: 700rpx;
			overflow-y: scroll;
			margin: 0 auto;

			.list-item {
				width: 100%;
				margin-bottom: 20rpx;
				background: #FFFFFF;

				.list_item {
					box-sizing: border-box;
					padding: 25rpx;
					display: flex;
					align-items: center;

					.list_item-img {
						width: 200rpx;
						height: 142rpx;
						margin-right: 32rpx;
					}

					.list_item-content {
						width: 300rpx;

						.list_item-content-h {

							margin-bottom: 32rpx;
							font-family: PingFang;
							font-weight: 800;
							font-size: 28rpx;
							color: #131313;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.list_item-content-subTitle {
							font-family: PingFang;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							display: flex;
							align-items: center;
							margin-bottom: 27rpx;


						}

						.list_item-content-address {
							min-width: 0;
							font-weight: 400;
							font-size: 32rpx;
							color: #F71515;

							//height: 23rpx;
						}
					}

					.list_item-rig {
						flex: 1;
						min-width: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						image {
							width: 34rpx;
							height: 34rpx;
						}
					}
				}
			}
		}

		.form {
			width: 100%;
			background: #302E35;
			padding: 20rpx 30rpx 40rpx;
			box-sizing: border-box;

			.form-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.form-header-title {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					input {
						width: 134rpx;
						height: 68rpx;
						background: #F3F3F3;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						margin: 0 20rpx;
						color: #000;
						padding: 0 10rpx;
					}
				}

				.form-header-btn {
					width: 134rpx;
					height: 68rpx;
					background: #12B475;
					border-radius: 34rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.form-c {
				width: 100%;

				textarea {
					width: 669rpx;
					height: 107rpx;
					background: #F3F3F3;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 26rpx;
					color: #999999;
				}

				.ac {
					font-weight: 300;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}

	}

	.price {
		padding: 24rpx !important;

		.form-header {
			margin-bottom: 0 !important;
		}
	}
</style>